<template>
	<!-- left_left-container 使用标识符 -->
	<!-- <div class="left-container" left_left-container> -->
	<!-- 使用在style标签处使用了scoped后，便不必专门指定 -->
	<div class="left-container">	
		<h3>this is Left Vue</h3>
		<hr />
		<p>Left Vue init传参结果为{{init}}</p>
		<p>Left Vue info.name传参结果为{{info.name}}</p>
		<p>{{num}}</p>
		<button @click="addNum" >num +1 </button>
		<button @click="addBroNum" >broNum +1 = {{broNum}}</button>
	</div>
</template>

<script>
	
	//导入eventBus
	import bus from '@/js/EventBus.js'
	
	export default{
		//props里的参数是只读的，建议赋值给变量使用
		//当props传过来的是对象时（传的值是对象的引用），是可以修改其属性值的，但不建议修改
		props:[
			'p_init',
			'info'
		],
		data(){
			return{
				init:this.p_init,
				num:0,
				broNum:0
			}
		},
		methods:{
			addNum(){
				this.num++;
				//子向父组件传值用$emit
				this.$emit('numChange',this.num);
			},
			addBroNum(){
				this.broNum++;
				bus.$emit('broNumChange',this.broNum);
			},
			seeBroNum(){
				
			}
		},
		created() {
			bus.$on('broNumChange',(val)=>{this.broNum=val});
		}
	}
	
</script>

<!-- 也可以使用scoped属性，使vue统一装配(只能防止不扩散，不能防止不被影响) -->
<style lang="less" scoped>
	//使用[]设置唯一标识符，可以防止css串页
	//.left-container[left_left-container] {
	.left-container {
		width: 50%;
		padding: 0 20px 20px;
		background-color: red;
		min-height: 250px;
		flex: 1;
	}
	
</style>